<!--
 * @Author: Li Zengkun
 * @Date: 2022-09-13 19:30:35
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-09-18 15:36:58
 * @Description: 
-->
<template>
  <div class="content">
    <el-card shadow="hover">
      <template #header>
        <div class="header">
          <span>轮播图管理</span>
          <el-button type="success" @click="dialogShow = true" icon="CirclePlus"
            >添加轮播图</el-button
          >
        </div>
      </template>

      <!-- table -->
      <el-table :data="slideList" style="width: 100%">
        <el-table-column prop="id" label="id" width="40" />
        <el-table-column prop="title" label="链接标题" width="120" />
        <el-table-column label="轮播图片" width="120">
          <template #default="scope">
            <el-image
              style="height: 80px; width: 80px"
              hide-on-click-modal="true"
              :initial-index="scope.$index"
              :src="scope.row.picture"
              fit="cover"
              :preview-src-list="imgList"
              preview-teleported="true"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="url" label="跳转地址" width="180" />
        <el-table-column label="跳转方式" width="100">
          <template #default="scope">{{
            scope.row.target === "_blank" ? "新页面打开" : "此页面打开"
          }}</template>
        </el-table-column>
        <el-table-column label="排序数字" width="80">
          <template #default="scope">
            <el-tag>{{ scope.row.slide_order }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="添加日期" width="120" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              @click="handleRemove(scope.row, scope.$index)"
              type="danger"
              icon="Delete"
              >删除</el-button
            >
            <el-button @click="handleEdit(scope.row)" type="primary" icon="Edit"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 添加对话框 -->
    <el-dialog v-model="dialogShow" title="添加轮播图">
      <el-form ref="formRef" :rules="rules" :model="form" label-position="top">
        <el-form-item label="标题 (可选)" prop="title">
          <el-input type="text" v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="跳转地址 (例：http://www.baidu.com)" prop="url">
          <el-input type="text" v-model="form.url"></el-input>
        </el-form-item>
        <el-form-item label="跳转方式" prop="target">
          <el-radio-group v-model="form.target">
            <el-radio label="_blank">新页面打开</el-radio>
            <el-radio label="_self">此页面打开</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="排序数字 (数字越小越靠前)" prop="slide_order">
          <el-input-number v-model="form.slide_order" :min="0" />
        </el-form-item>
        <el-form-item label="图片" style="width: 100%" prop="picture">
          <SingleUpload v-model="form.picture" />
        </el-form-item>
        <el-divider></el-divider>
        <el-button
          @click="handleSubmit"
          type="primary"
          class="btn-1"
          icon="CirclePlus"
          style="width: 100%"
          round
          >添 加</el-button
        >
      </el-form>
    </el-dialog>

    <!-- 编辑对话框 -->
    <el-dialog v-model="EditDialogShow" title="添加轮播图">
      <el-form
        ref="editFormRef"
        :rules="rules"
        :model="editForm"
        label-position="top"
      >
        <el-form-item label="标题 (可选)" prop="title">
          <el-input type="text" v-model="editForm.title"></el-input>
        </el-form-item>
        <el-form-item label="跳转地址 (例：http://www.baidu.com)" prop="url">
          <el-input type="text" v-model="editForm.url"></el-input>
        </el-form-item>
        <el-form-item label="跳转方式" prop="target">
          <el-radio-group v-model="editForm.target">
            <el-radio label="_blank">新页面打开</el-radio>
            <el-radio label="_self">此页面打开</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="排序数字 (数字越小越靠前)" prop="slide_order">
          <el-input-number v-model="editForm.slide_order" :min="0" />
        </el-form-item>
        <el-form-item label="图片" style="width: 100%" prop="picture">
          <SingleUpload v-model="editForm.picture" />
        </el-form-item>
        <el-divider></el-divider>
        <el-button
          @click="handleSubmitEdit"
          type="primary"
          class="btn-1"
          icon="FolderOpened"
          style="width: 100%"
          round
          >保 存</el-button
        >
      </el-form>
    </el-dialog>
  </div>
</template>
 
<script setup>
import { ref, reactive } from "vue";
import { slide } from "@/api";
import SingleUpload from "@/components/SingleUpload.vue";

// 初始化
let slideList = ref((await slide.list()).data);
let imgList = slideList.value.map((item) => {
  return item.picture;
});

// 对话框显示
const dialogShow = ref(false);
const EditDialogShow = ref(false);

// 表单实例
const formRef = ref(null);
const editFormRef = ref(null);

// 待添加表单
const form = ref({
  title: "",
  picture: "",
  url: "",
  target: "_blank",
  slide_order: 0,
});

// 待修改表单
const editForm = ref({});

/**
 * @description: 图片验证规则
 * @return {*}
 * @param {*} rule
 * @param {*} value
 * @param {*} callback
 */
const checkPicture = (rule, value, callback) => {
  if(dialogShow.value){
    if (form.value.picture === "") {
      return callback(new Error("请选择图片"));
    }
  }
  if(EditDialogShow.value){
    if (editForm.value.picture === "") {
      return callback(new Error("请选择图片"));
    }
  }
  callback();
};

const rules = reactive({
  url: [{ required: true, message: "请输入跳转地址", trigger: "blur" }],
  target: [{ required: true, message: "请选择跳转方式", trigger: "blur" }],
  slide_order: [{ required: true, message: "请输入排序数字", trigger: "blur" }],
  picture: [{ required: true, validator: checkPicture, trigger: "blur" }],
});

/**
 * @description: 添加
 * @return {*}
 */
const handleSubmit = () => {
  formRef.value.validate(async (valid, fields) => {
    if (valid) {
      let res = await slide.add(form.value);
      if (res.status) {
        ElMessage.success("添加成功");
        slideList.value = (await slide.list()).data;
        dialogShow.value = false;
        return;
      }
      ElMessage.error(res.msg);
      return;
    }
  });
};

/**
 * @description: 删除
 * @return {*}
 * @param {*} row
 * @param {*} index
 */
const handleRemove = (row, index) => {
  ElMessageBox.confirm(
    `<p>您是否要删除<image style="width:250px;vertical-align:middle" src="${row.picture}"></image></p>`,
    "Warning",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      dangerouslyUseHTMLString: true,
      type: "warning",
    }
  )
    .then(async () => {
      let { status, msg } = await slide.remove({ id: row.id });
      if (status) {
        slideList.value.splice(index, 1);
      }
      ElMessage({
        type: status ? "success" : "error",
        message: msg,
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消",
      });
    });
};

/**
 * @description: 打开编辑对话框
 * @return {*}
 * @param {*} row
 */
const handleEdit = (row) => {
  editForm.value = row;
  EditDialogShow.value = true;
};

/**
 * @description: 编辑提交
 * @return {*}
 */
const handleSubmitEdit = () => {
  editFormRef.value.validate(async (valid, fields) => {
    if (valid) {
      let res = await slide.edit(editForm.value);
      if (res.status) {
        ElMessage.success("编辑成功");
        slideList.value = (await slide.list()).data;
        EditDialogShow.value = false;
        return;
      }
      ElMessage.error(res.msg);
      return;
    }
  });
};
</script>

<style lang='less' scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-content: center;
}
</style>
